/*
 * 日期选择框
 * name placeholder Name
 * onChange 放在FormItem 下自动传过来的方法，在Form表单里使用无需传值
 **/

import React, { Fragment, useEffect, useMemo, useState } from 'react';
import { Col, DatePicker, Form, Row, Select } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { SchemaManageAPI } from '../../type';
import cls from 'classnames';

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

interface IPropsType {
  id?: string;
  value?: any;
  onChange?: any;
  opt: SchemaManageAPI.ISearchList;
  type: string;
  dateType?: string;
}

const { RangePicker }: any = DatePicker;

export const SearchRangePickerCheck: React.FC<IPropsType> = (props) => {
  /**
   * 传入的参数
   * showRange: { today: true, week: true, month: false, year: false }
   * 控制今天 本周 本月 本年 显示隐藏
   * dateType : 控制显示年、月、日
   */
  const [timeType, setTimeType] = useState<string>('date');
  const [dateType, setDateType] = useState<string>('YYYY-MM-DD');

  const controlRange = useMemo(() => {
    let ranges: any = {};
    if (props?.opt?.showRange && JSON.stringify(props?.opt?.showRange) != '{}') {
      if (props?.opt?.showRange?.today) {
        ranges['今天'] = [moment(), moment()];
      }
      if (props?.opt?.showRange?.week) {
        ranges['本周'] = [moment().startOf('week'), moment().endOf('week')];
      }
      if (props?.opt?.showRange?.month) {
        ranges['本月'] = [moment().startOf('month'), moment().endOf('month')];
      }
      if (props?.opt?.showRange?.year) {
        ranges['本年'] = [moment().startOf('year'), moment().endOf('year')];
      }
    } else {
      ranges = {
        今天: [moment(), moment()],
        本周: [moment().startOf('week'), moment().endOf('week')],
        本月: [moment().startOf('month'), moment().endOf('month')],
        本年: [moment().startOf('year'), moment().endOf('year')],
      };
    }
    return ranges;
  }, [props?.opt?.showRange, timeType]);

  return (
    <Fragment key={props?.opt?.name + '-deptSelect'}>
      <Row style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Col
          // md={props?.opt?.whetherSenior ? 24 : props?.opt?.md ? props?.opt?.md : 4}
          md={6}
          sm={props?.opt?.whetherSenior ? 24 : props?.opt?.sm ? props?.opt?.sm : 24}
          key={`${props?.opt?.name}${Math.random()}`}
        >
          <Form.Item
            style={{ ...props?.opt?.itemStyle }}
            name={props?.opt?.name + 'Type'}
            initialValue={3}
            label={props?.opt?.whetherSenior ? `${props?.opt?.label}` : ''}
            className={cls('drawer-form-item')}
          >
            <Select
              placeholder="统计维度"
              onChange={(value) => {
                if (value === 1) {
                  setTimeType('year');
                  setDateType('YYYY');
                }
                if (value === 2) {
                  setTimeType('month');
                  setDateType('YYYY-MM');
                }
                if (value === 3) {
                  setTimeType('date');
                  setDateType('YYYY-MM-DD');
                }
              }}
            >
              <Select.Option value={1} key={1}>
                年
              </Select.Option>
              <Select.Option value={2} key={2}>
                月
              </Select.Option>
              <Select.Option value={3} key={3}>
                日
              </Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col
          // md={props?.opt?.whetherSenior ? 24 : props?.opt?.md ? (props?.opt?.md * 2) : 8}
          md={17}
          sm={props?.opt?.whetherSenior ? 24 : props?.opt?.sm ? props?.opt?.sm : 24}
          // key={props?.opt?.name + '-userSelect'}
          key={`${props?.opt?.name}${Math.random()}`}
        >
          <Form.Item
            style={{ ...props?.opt?.itemStyle }}
            // name={props?.opt?.formOrgType?.USER}
            name={props?.opt?.name + 'Time'}
            label={props?.opt?.whetherSenior ? `${props?.opt?.label}` : ''}
            className={cls('drawer-form-item')}
          >
            <RangePicker
              onChange={props?.onChange}
              locale={locale}
              value={props?.value ?? null}
              style={{ width: '100%' }}
              placeholder={props?.opt?.placeholder ? [`${props?.opt?.placeholder}时间范围`, `${props?.opt?.placeholder}时间范围`] : ['时间开始', '时间结束']}
              picker={timeType}
              format={dateType}
              // ranges={controlRange}
            />
          </Form.Item>
        </Col>
      </Row>
    </Fragment>
  );
};
